<template>
    <div style="background-color:blanchedalmond">
        <h1>本页面主要展示vue的状态管理</h1>
        <!--先创建两个子组件，一个是女儿组件，一个是儿子组件-->
        <h1>这个是我儿子</h1>
        <!--请同学们把儿子组件添加到下方-->
        <SonBoy @boy='boyHandle'/>
        <h1>这个是我女儿</h1>
        <!--请同学们把女儿组件添加到下方-->
        <SonGirl @girl='girlHandle'/>
        <h3>请两个孩子想我汇报一下成绩</h3>
        <p>儿子的成绩是:{{boyGrade}},女儿的成绩是:{{girlGrade}}</p>
        <p>我先去看看我的金库里有多少钱</p>
        哈哈哈哈哈哈哈哈
    </div>
</template>



<script>
import SonBoy from '../components/SonBoy'
import SonGirl from '../components/SonGirl'
// import {useMyStore} from '../store/index.js'

export default{
components:{
    SonBoy,
    SonGirl,
},
methods:{
    boyHandle(val){
        this.boyGrade=val
    },
    girlHandle(val){
        this.girlGrade=val
    }
},
data(){
    return{
        boyGrade:'',
        girlGrade:'',
        // store:useMyStore()
    }
}
}



</script>